<template>
  <div :style="style" class="con">
    <div>
      <img class="logo-t" :src="require('../../assets/logo-t.png')" alt="" />
    </div>
    <div class="main">
      <div class="common">
        <div>
          <img
            class="titleimg"
            :src="require('../../assets/title.png')"
            alt=""
          />
        </div>
        <div class="login">
          <div>
            <img
              style="width: 54px; height: 54px"
              :src="require('../../assets/user.png')"
              alt=""
            />
          </div>

          <div class="form">
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="0px"
              class="demo-ruleForm"
            >
              <el-form-item label="" prop="userName">
                <el-input
                  placeholder="请输入用户名"
                  v-model="ruleForm.userName"
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="password">
                <el-input
                  placeholder="请输入密码"
                  v-model="ruleForm.password"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="testRoom" class="rem">
                <el-select
                  v-model="ruleForm.testRoom"
                  placeholder="请选择实验室"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in rooms"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="" class="rem2">
                <el-checkbox v-model="remember" class="check"
                  >记住账号密码</el-checkbox
                ></el-form-item
              >
              <el-form-item label="" prop="">
                <el-button :loading="loading" @click="login" class="loginBth"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { cutTestRoom, selectDistinctRoom } from "@/common/api";
export default {
  name: "Login",
  props: {},
  components: {},
  data() {
    return {
      bgStyle: require("@/assets/backgd.png"),
      ruleForm: {
        userName: "admin",
        password: "admin",
        testRoom: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        testRoom: [
          { required: true, message: "请选择实验室", trigger: "blur" },
        ],
      },
      loading: false,
      remember: false,
      rooms: [],
    };
  },
  computed: {
    style() {
      return {
        backgroundImage: `url(${this.bgStyle})`,
        backgroundSize: "cover", // 背景图片大小自适应
        backgroundPosition: "center", // 背景图片居中显示
      };
    },
  },
  created() {
    if (localStorage.getItem("remember")) {
      this.ruleForm = JSON.parse(localStorage.getItem("remember"));
    }
    this.getRooms();
  },
  methods: {
    login() {
      // if (process.env.NODE_ENV == "development") {
      //   //方便调试
      //   this.$router.push(`/sampleManage`);
      //   return;
      // }
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          cutTestRoom({
            userName: this.ruleForm.userName,
            testRoom: this.ruleForm.testRoom,
          })
            .then((res) => {
              this.loading = false;
              if (res.success) {
                this.$router.push(`/sampleManage`);
                const { userName, testRoom } = this.ruleForm;
                let str = JSON.stringify({ userName, testRoom });
                localStorage.setItem("loginInfo", str);
                this.$successMsg("登录成功");
              } else {
                this.$errorMsg(res.message);
              }
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    getRooms() {
      selectDistinctRoom().then((res) => {
        if (res.success) {
          this.rooms = res.data;
        } else {
          this.$errorMsg(res.message);
        }
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.con {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .logo-t {
    height: 50px;
    margin: 30px;
  }
}
.main {
  margin-top: -100px;
  flex: 1;
  width: 100%;
  // height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .common {
    display: flex;
    flex-direction: column;
    align-items: center;
    .titleimg {
      height: 100px;
    }
    .login {
      margin-top: 20px;
      width: 420px;
      // height: 280px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
        /* 水平偏移 | 垂直偏移 | 模糊半径 | 阴影颜色与透明度 */ 0 6px 20px
          rgba(0, 0, 0, 0.19); /* 可以添加多个阴影效果 */
      border-radius: 14px;
      padding: 20px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .form {
        margin-top: 20px;
        width: 80%;
        .loginBth {
          width: 100%;
          color: white;
          background-color: #0d6eb3;
        }
      }
    }
  }
}
.form .rem {
  margin-bottom: 12px;
}
.form .rem2 {
  margin-bottom: 0px;
}

:deep(
    .check .el-checkbox__input.is-checked .el-checkbox__inner,
    .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner
  ) {
  border-color: #0d6eb3;
  background-color: #0d6eb3;
}
:deep(.check .el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #0d6eb3;
}
</style>
